<template>
  <div class="bo">
    <div class="bei">
     <Yydb></Yydb>
    </div>
    <div class="guan">
      <ul class="ping">
        <li>※官方号源</li>
        <li>※医生本人</li>
        <li>※平台认证</li>
        <li>※诊前退款</li>
      </ul>
      <div class="an">
        <dl @click="nei">
          <dt>
            <img
              src="../../images/55b04acf9e0af52dd32d8cd027eb4e97.png"
              alt=""
            />
          </dt>
          <h2>按医院</h2>
          <p>全国知名医院</p>
        </dl>
        <dl @click="nei">
          <dt>
            <img
              src="../../images/a4121f319a7ed56f3012d15cdb85cc77.png"
              alt=""
            />
          </dt>
          <h2>按科室</h2>
          <p>按科室挂号</p>
        </dl>
        <dl @click="yisheng">
          <dt>
            <img
              src="../../images/6aeeffff491c5a012a25839d41b4252b.png"
              alt=""
            />
          </dt>
          <h2>按医生</h2>
          <p>全国知名专家</p>
        </dl>
      </div>
      <div class="nei">
        <dl @click="nei">
          <dt>
            <img
              src="../../images/41c855977aaca3ecb969bd152a5b5512.png"
              alt=""
            />
          </dt>
          <dd>内科</dd>
        </dl>
        <dl @click="nei">
          <dt>
            <img
              src="../../images/05b3146a8f1303b67962c1e99bd36d3f.png"
              alt=""
            />
          </dt>
          <dd>外科</dd>
        </dl>
        <dl @click="nei">
          <dt>
            <img
              src="../../images/3a52c6b6f70c50b278612b7ca3f7b8e8.png"
              alt=""
            />
          </dt>
          <dd>皮肤科</dd>
        </dl>
        <dl @click="nei">
          <dt>
            <img
              src="../../images/aacc2b4aaa07d9785b63674cd153ef74.png"
              alt=""
            />
          </dt>
          <dd>男科</dd>
        </dl>
        <dl @click="nei">
          <dt>
            <img
              src="../../images/6b174077bcedf68d87d91c64f3ddc17a.png"
              alt=""
            />
          </dt>
          <dd>妇产科</dd>
        </dl>
      </div>
    </div>
    <div class="wdgh">
      <van-icon name="completed-o" />
      <h2>我的挂号</h2>
      <p class="cha" @click="ckjl">查看记录 〉</p>
    </div>
    <div class="rmyy">
      <div class="rm">
        <h2>热门医院</h2>
        <p @click="geng">更多 〉</p>
      </div>
      <div class="yiyuan" v-for="(item, index) in listyy" :key="index">
       <div @click="yuan(item)">
         <van-card num="99km" :title="item.nosocomium" :thumb="item.socoimage">
          <template #tags>
            <van-tag plain type="primary">{{ item.socostate }}</van-tag>
            <van-tag plain type="primary">{{ item.socolv }}</van-tag>
          </template>
          <template #bottom>
            <p>科室：{{ item.socoadmin }}</p>
            <p>地址：{{ item.sococity }}</p>
          </template>
        </van-card>
       </div>
      </div>
    </div>

    <div class="rmyy">
      <div class="rm">
        <h2>热门医生</h2>
        <p @click="yisheng">更多 〉</p>
      </div>
      <van-tabs v-model:active="active" @click-tab="qieh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-tab v-for="index in tabs" :title="index">
            <div class="yisheng" v-for="(item, index) in sb" :key="index">
              <div @click="ysheng(item)">
                <van-card
                :desc="item.doctorstate"
                :title="item.doctorname"
                :thumb="item.doctorimage"
              >
                <template #num>
                  <button class="gua">去挂号</button>
                </template>
                <template #tags>
                  <van-tag plain type="primary">{{
                    item.doctoradministre
                  }}</van-tag>
                </template>
                <template #bottom>
                  <div class="aaa">
                    <p class="shan">擅长：</p>
                    <van-text-ellipsis
                      rows="1"
                      :content="item.doctordescword"
                      expand-text="展开"
                      collapse-text="收起"
                    />
                  </div>
                </template>
              </van-card>
              </div>
            </div>
          </van-tab>
        </van-list>
      </van-tabs>
    </div>
    
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import Yydb from '../../components/xiaoc/Yydb.vue';
const loading = ref(false)
const finished = ref(false)
const router = useRouter()
const sb = ref([])
const active = ref(0)
const listyy = ref([])

const yisheng = ()=>{
  router.push("/xiao/yisheng")
}

const yuan=(item:string)=>{
  console.log(item,"tftghyjkl");
  router.push({
    path:"/xiao/xiangyy",
    query:item
  })
}
const ysheng = (item)=>{
  router.push({
    path:"/xiao/xiangys",
    query:item
  })
}


const getRmyy = async () => {
  await axios
    .get('/api/doctor', {
      params: {
        pageCode: 1,
        pageSize: 10,
      },
    })
    .then(res => {
      listyy.value = res.data.data.slice(0, 8)
    })
}
getRmyy()

const tabs = ref([
  '全科',
  '小儿泌尿科',
  '牙周科',
  '风湿免疫科',
  '小儿心外科',
  '普通内科',
])
const listys = ref([])

const getRmys = async () => {
  await axios
    .get('/api/hospital', {
      params: {
        pageCode: 1,
        pageSize: 10,
      },
    })
    .then(res => {
      console.log(res)
      listys.value = res.data.data.slice(0, 15)
    })
}
getRmys()

onMounted(() => {
  axios
    .get('/api/hospital', {
      params: {
        pageCode: 1,
        pageSize: 10,
      },
    })
    .then(res => {
      console.log(res)
      sb.value = res.data.data.slice(0, 15)
      console.log(sb.value.length)
      finished.value = true
    })
})

const qieh = () => {
  if (active.value == 0) {
    sb.value = [...listys.value]
  }
  if (active.value > 0) {
    sb.value = listys.value.filter(
      item => item.doctoradministre == tabs.value[active.value],
    )
  }
}
const geng = () => {
  router.push('/xiao/yongy')
}

const nei = () =>{
  router.push('/xiao/yongy')
}
const ckjl = ()=>{
  router.push('/xiao/wdgh')
}
</script>

<style lang="scss">
.bo {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: hsl(0, 0%, 92%);
}
.bei {
  width: 100vw;
  height: 25vh;
  background: linear-gradient(
    rgba(2, 124, 95, 0.636),
    rgba(233, 242, 233, 0.625)
  );
}
.guan {
  width: 90vw;
  height: 4.2rem;
  background-color: #fff;
  margin-left: 5vw;
  margin-top: -15vh;
  border-radius: 0.2rem;
}
.erjia {
  width: 20vw;
  height: 1rem;
  float: left;
  position: relative;
}
.icon {
  font-size: 0.3rem;
  position: absolute;
  left: 17vw;
  top: 2.3vh;
  color: #fff;
}
.se {
  background: rgba(0, 0, 0, 0);
  color: aliceblue;
}
.ping {
  font-size: 0.25rem;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: rgba(0, 0, 0, 0.028);
  border-top-right-radius: 0.2rem;
  border-top-left-radius: 0.2rem;
  padding: 0;
  list-style: none;
  li {
    float: left;
    width: 1.6884rem;
    color: #939393;
    text-align: center;
  }
}
.an {
  width: 100%;
  height: 2rem;
  font-size: 0.2rem;
  margin-top: 0.15rem;
  dl {
    width: 33.3%;
    height: 2rem;
    text-align: center;
    float: left;
    dt {
      width: 100%;
      height: 1rem;
      img {
        width: 1rem;
        height: 1rem;
      }
    }
    h2 {
      margin-top: -0.01rem;
    }
    p {
      margin-top: -0.18rem;
      color: #939393;
    }
  }
}
.nei {
  width: 100%;
  height: 1rem;
  border-radius: 0.1rem;
  display: flex;
  font-size: 0.25rem;
  dl {
    width: 20%;
    height: 1rem;
    text-align: center;
    margin-top: -0.1rem;
    dt {
      img {
        width: 0.5rem;
        height: 0.5rem;
      }
    }
    dd {
      padding: 0;
      margin: 0;
    }
  }
}
.wdgh {
  width: 90%;
  height: 1.1rem;
  background-color: #fff;
  margin-top: 0.2rem;
  margin-left: 5%;
  border-radius: 0.2rem;
  line-height: 1.2rem;
  .van-icon {
    font-size: 0.4rem;
    float: left;
    margin-top: 0.35rem;
    padding-left: 0.2rem;
  }
  h2 {
    width: 4.3rem;
    font-size: 0.4rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0.2rem;
    float: left;
  }
  .cha {
    float: left;
    font-size: 0.3rem;
    margin: 0;
    color: #939393;
  }
}
.rmyy {
  width: 90%;
  background-color: #fff;
  margin-left: 5%;
  border-radius: 0.2rem;
  font-size: 0.3rem;
  .rm {
    width: 100%;
    height: 1.3rem;
    line-height: 1.3rem;
  }
  h2 {
    font-size: 0.4rem;
    width: 5.5rem;
    float: left;
    height: 100%;
    margin: 0;
    padding-left: 0.2rem;
  }
  .van-card {
    margin-top: 0.02rem;
    border-bottom: 1px solid #ccc;
  }
  p {
    color: #333;
  }
}
.gua {
  border-radius: 0.5rem;
  background-color: #4cceae;
  color: #fff;
  border: none;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
}
.yisheng {
  .shan {
    float: left;
  }
  .van-card {
    margin-top: 0.01rem;
    border-radius: 0.3rem;
    overflow: hidden;
  }
  .aaa {
    width: 4rem;
    height: 0.8rem;
  }
}
</style>
